<template>
    <div class="fxfkLeftpanel">
        <div class="firstBox box">
            <LittleTitle titles="防汛防风" />
            <div class="themePic">
                <div
                    v-for="(item1, index1) in list"
                    :class="{
                        themePicItem: true,
                        themePicItemActive: item1.state1,
                    }"
                    :key="index1 + 'child'"
                    @click="handleItemClick($event, item1, index1)"
                >
                    <div class="dataName">
                        <img
                            :src="`./images/sjzx/icons/${item1.label}.png`"
                            alt=""
                        />
                        <p>{{ item1.label }}</p>
                    </div>
                    <!-- <div class="contentLine">
                        <img src="/images/sjzx/trangle.png" alt="" />
                    </div> -->
                    <div class="num">
                        <span v-if="item1.online">{{ item1.online }}/</span>
                        {{ item1.count }}
                    </div>
                </div>
            </div>
        </div>
        <div class="secondBox box half">
            <LittleTitle titles="责任人" />
            <div class="themePic">
                <div
                    v-for="(item1, index1) in peopleList"
                    :class="{
                        themePicItem: true,
                        themePicItemActive: item1.state1,
                    }"
                    :key="index1 + 'child'"
                    @click="handlePeopleClick(item1, index)"
                >
                    <div class="dataName1">
                        <img
                            :src="`./images/sjzx/icons/${item1.label}.png`"
                            alt=""
                        />
                        <p>{{ item1.label }}</p>
                    </div>
                    <!-- <div class="contentLine">
                        <img src="/images/sjzx/trangle.png" alt="" />
                    </div> -->
                    <div class="num1">{{ item1.count }}</div>
                </div>
            </div>
        </div>
        <div class="thirdBox box half">
            <LittleTitle titles="安全生产" />
            <div class="themePic">
                <div
                    v-for="(item1, index1) in produceList"
                    :class="{
                        themePicItem: true,
                        themePicItemActive: item1.state1,
                    }"
                    :key="index1 + 'child'"
                    @click="handleDangerClick($event, item1, index1)"
                >
                    <div class="dataName">
                        <img
                            :src="`./images/sjzx/icons/高危存储企业.png`"
                            alt=""
                        />
                        <p>{{ item1.label }}</p>
                    </div>
                    <!-- <div class="contentLine">
                        <img src="/images/sjzx/trangle.png" alt="" />
                    </div> -->
                    <div class="num">{{ item1.count }}</div>
                </div>
            </div>
        </div>

        <!-- <div class="placeSelect" v-if="false">
            <el-cascader
                popper-class="placeSelect"
                v-model="placeValue"
                :options="places"
                @change="handlePlaceChange">
            </el-cascader>
        </div> -->
    </div>
</template>

<script>
import {
    ref,
    reactive,
    toRefs,
    watch,
    onBeforeUnmount,
    onMounted,
    computed,
} from "vue";
import pointeManager from "../fxfkPointManager";
import LittleTitle from "./LittleTitle.vue";
import { useStore } from "vuex";
import axios from "axios";
import doc from "../../sjzx/sjzxDoc";
import places from "./place.js";
let hnsxqh = null;
let handler3D = null;
let timer = null;
let YCtimeid = null; //实时渔船
export default {
    components: {
        LittleTitle,
    },
    //props:["typeName"],
    setup() {
        let store = useStore();
        const userRegion = computed(() => {
            return store.state.userRegion;
        });
        console.log(userRegion.value)
        //接口获取数据
        let themeList = reactive({
            list: [],
            peopleList: [],
            produceList: [],
            yingjiPeopleList: [],
            yingjiGoodsList: [],
            fanghuList: [],
            yingjiBinanList: [],
            yingjiWeishengList: [],
            placesList: [],
        });
        // 获取数据
        const getFxffList = async (region) => {
            let sanFangurl = `${sjzxUrl}/api/tree/getRiskTree?ids=146`;
            let gongdiUrl = `${sjzxUrl}/api/v2/construct/getConstructList`;
            let safeProductUrl = `${sjzxUrl}/api/tree/getRiskTree?ids=159`;
            if(region != undefined){
                sanFangurl = `${sjzxUrl}/api/tree/getRiskTree?ids=146&addvcd=${window.regionCode[region]}`;
                gongdiUrl = `${sjzxUrl}/api/v2/construct/getConstructList?addvcd=${window.regionCode[region]}`;
                safeProductUrl = `${sjzxUrl}/api/tree/getRiskTree?ids=159&addvcd=${window.regionCode[region]}`;
            }
            //获取防汛防风列表
            const result = await axios.get(
                sanFangurl
            );
            const orderList = result.data.slice(0, result.data.length - 1);
            // 全部渔船列表
            const resultYC = await axios.get(
                `${sjzxUrl}/api/fishingBoat/realtimeBeidou`
            );
            // 在建工地列表
            const resultGD = await axios.get(
                gongdiUrl
            );
            resultYC.data.data.label="实时渔船"
            orderList.push(resultYC.data.data);
            orderList.push(resultGD.data.data);

            orderList.forEach((order) => {
                order.state1 = false;
            });
            themeList.list = orderList;
            //责任人列表
            const result1 = await axios.get(
                `${sjzxUrl}/api/tree/getRootTree?ids=157`
            );
            const orderList1 = result1.data.slice(0,1);
            orderList1.forEach((order) => {
                order.state1 = false;
            });
            themeList.peopleList = orderList1;

            //安全生产列表
            const result2 = await axios.get(
                safeProductUrl
            );
            const orderList2 = result2.data;
            orderList2.forEach((order) => {
                order.state1 = false;
            });
            themeList.produceList = orderList2;
        };
        if (userRegion.value == "海南省") {
            getFxffList();
        } else {
            getFxffList(userRegion.value);
        }
        watch(
            () => {
                store.state.userRegion;
            },
            (newValue) => {
                console.log(newValue);
                // if(newValue=="海南省"){
                //     getFxffList();
                // }else{
                //     getFxffList(newValue);
                // }
            },
            {
                
            }
        );
        // 监听来自图例的变化
        watch(
            () => store.state.checkedCities,
            (newValue) => {
                list.value.forEach((item1, index1) => {
                    item1.state1 = false;
                    if (newValue.indexOf(item1.label) > -1) {
                        item1.state1 = true;
                    }
                });
            }
        );
        //球上点位拾取，请求点位详情
        const pointHandleClick = (entity) => {
            //显示
            let parma = null;
            if (entity.type == "渔船") {
                parma = "condition";
            } else {
                parma = "id";
            }
            removeInfoBox();
            axios
                .get(
                    `${sjzxUrl}${entity.kbApiDetail}?${parma}=${entity.detailId}`
                )
                .then((res) => {
                    if (entity.type == "渔船") {
                        //查看渔船
                        let vData = res.data.data;
                        store.commit("changeYCList", vData);

                        addBoundInfoBox(entity.position._value, "infoBox2");
                        //需要加全景
                    } else if (entity.type == "地质灾害隐患点") {
                        let vData = res.data.data;
                        let dic = doc[entity.type];
                        let obj = {
                            隐患基本情况: {},
                            市县落实情况: {},
                            省级行业主管部门核查情况: {},
                        };
                        // 原顺序
                        for (let key in dic) {
                            if (vData.baseInfo.hasOwnProperty(key)) {
                                obj["隐患基本情况"][dic[key]] =
                                    vData.baseInfo[key];
                            }
                            if (vData.check.hasOwnProperty(key)) {
                                obj["市县落实情况"][dic[key]] =
                                    vData.check[key];
                            }
                            if (vData.implement.hasOwnProperty(key)) {
                                obj["省级行业主管部门核查情况"][dic[key]] =
                                    vData.implement[key];
                            }
                        }
                        store.commit("changeInfoBoxThreeContent", obj);
                        addBoundInfoBox(entity.position._value, "infoBox4");
                    } else if( entity.type == "非煤矿山安全生产" || entity.type == "企业信息" ||  entity.type == "重大危险源信息" ){
                        //隐患基本情况
                        //市县落实情况
                        //省级行业主管部门核查情况
                        //baseInfo check implement
                        //获取字典
                        let dic = doc[entity.type];
                        let vData = res.data.data;
                        let obj  = {};
                        for (let key in dic) {
                            if(vData[key]){
                                obj[dic[key]] = vData[key]
                            }
                        }
                        store.commit("changeInfoBoxContent", obj);
                        addBoundInfoBox(entity.position._value, "infoBox8");
                    }else {
                        //隐患基本情况
                        //市县落实情况
                        //省级行业主管部门核查情况
                        //baseInfo check implement
                        //获取字典
                        let dic = doc[entity.type];
                        let vData = res.data.data;
                        let obj = {
                            隐患基本情况: {},
                            市县落实情况: {},
                            省级行业主管部门核查情况: {},
                        }; 
                        // 原顺序
                        for (let key in dic) {
                            if (vData.baseInfo.hasOwnProperty(key)) {
                                obj["隐患基本情况"][dic[key]] =
                                    vData.baseInfo[key];
                            }
                            if (vData.check.hasOwnProperty(key)) {
                                obj["市县落实情况"][dic[key]] =
                                    vData.check[key];
                            }
                            if (vData.implement.hasOwnProperty(key)) {
                                obj["省级行业主管部门核查情况"][dic[key]] =
                                    vData.implement[key];
                            }
                        }
                        store.commit("changeInfoBoxThreeContent", obj);
                        addBoundInfoBox(entity.position._value, "infoBox0");
                    }
                });
        };
        const newPointHandleClick = (entity) => {
            //显示
            removeInfoBox();
            axios
                .get(
                    `${sjzxUrl}${entity.kbApiDetail.kbApiDetail}?kbId=${entity.kbApiDetail.kbId}&dataId=${entity.detailId}`
                )
                .then((res) => {
                    let vData = res.data.data;
                    let obj = {};
                    let dic = doc[entity.type];
                    // 原顺序
                    for (let key in dic) {
                        obj[dic[key]] = vData[key];
                    }
                    store.commit("changeInfoBoxContent", obj);
                    addBoundInfoBox(entity.position._value, "infoBox1");
                });
        };
        // 三防责任人的单击事件
        const peopleHandleClick = (entity) => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                let parma = "id";
                // var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(entity.position._value); //笛卡尔转84
                // var lat=Cesium.Math.toDegrees(cartographicPosition.latitude);
                // var lng=Cesium.Math.toDegrees(cartographicPosition.longitude);
                // let height = Math.ceil(viewer.camera.positionCartographic.height)
                // let option = {
                //     destination: Cesium.Cartesian3.fromDegrees(
                //         parseFloat(lng),
                //         parseFloat(lat),
                //         height
                //     ),
                //     duration:1.5
                // }
                // viewer.camera.flyTo(option);
                removeInfoBox();
                // option.complete = ()=>{
                axios
                    .get(
                        `${sjzxUrl}${entity.kbApiDetail}?${parma}=${entity.detailId}`
                    )
                    .then((res) => {
                        let vData = res.data.data;
                        let obj = {};
                        let dic = doc[entity.type];
                        // 原顺序
                        for (let key in dic) {
                            obj[dic[key]] = vData[key];
                        }
                        store.commit("changeInfoBoxContent", obj);
                        addBoundInfoBox(entity.position._value, "infoBox5");
                    });
                // }
            }, 150);
        };
        // 三防责任人的双击事件
        const handlePeopleDoubleClick = (movement) => {
            clearTimeout(timer);
            let pickedObject = viewer.scene.pick(movement.position);
            let height = {
                全市: 283290,
                全县: 109580 - 5000,
                全区: 109580 - 5000,
                全镇: 25088,
                全乡: 25088,
            };
            let option = {
                destination: Cesium.Cartesian3.fromDegrees(
                    parseFloat(pickedObject.id.zxlon),
                    parseFloat(pickedObject.id.zxlat),
                    height[pickedObject.id.labelDistance] - 5000
                ),
                duration: 1.5,
            };
            viewer.camera.flyTo(option);
        };
        const removeInfoBox = () => {
            const oneDiv1 = window.document.getElementById("infoBox1");
            oneDiv1.style.display = "none";
            const oneDiv2 = window.document.getElementById("infoBox2");
            oneDiv2.style.display = "none";
            const oneDiv3 = window.document.getElementById("infoBox3");
            oneDiv3.style.display = "none";
            const oneDiv4 = window.document.getElementById("infoBox4");
            oneDiv4.style.display = "none";
            const oneDiv5 = window.document.getElementById("infoBox5");
            oneDiv5.style.display = "none";
            const oneDiv6 = window.document.getElementById("infoBox6");
            oneDiv6.style.display = "none";
            const oneDiv7 = window.document.getElementById("infoBox7");
            oneDiv7.style.display = "none";
        };
        // 添加删除渔船位置和在建工地
        const YCandGD = (item) => {
            if (item.state1) {
                if (item.onlineList) {
                    pointeManager.addYC(
                        item.label,
                        item.onlineList,
                        item.kbApiDetail,
                        "leftClick",
                        YCclick
                    );
                    YCtimeid = setInterval(() => {
                        pointeManager.addYC(
                            item.label,
                            item.onlineList,
                            item.kbApiDetail,
                            "leftClick",
                            YCclick
                        );
                    }, 1000 * 60 * 5);
                } else if (item.constructVoList) {
                    //添加工地
                    pointeManager.addGD(
                        item.label,
                        item.constructVoList,
                        "/api/v2/construct/getEquipmentList",
                        "leftClick",
                        GDclick
                    );
                }
            } else {
                //清除点
                pointeManager.removePointBySign(item.label);
                // 清除渔船定时器
                YCtimeid && clearInterval(YCtimeid);
                YCtimeid = null;
            }
        };
        // 点击球上渔船点位
        const YCclick = (entity) => {
            var cartographicPosition =
                Cesium.Ellipsoid.WGS84.cartesianToCartographic(
                    entity.position._value
                ); //笛卡尔转84
            var lat = Cesium.Math.toDegrees(cartographicPosition.latitude);
            var lng = Cesium.Math.toDegrees(cartographicPosition.longitude);
            let option = {
                destination: Cesium.Cartesian3.fromDegrees(
                    parseFloat(lng),
                    parseFloat(lat + 0.05),
                    80000
                ),
                duration: 1.5,
            };
            viewer.camera.flyTo(option);
            removeInfoBox();
            option.complete = () => {
                axios
                    .get(
                        `${sjzxUrl}/api/fishingBoat/oneBeidou?id=${entity._id}`
                    )
                    .then((res) => {
                        let vData = res.data.data;
                        let obj = {};
                        let dic = doc[entity.type];
                        // 原顺序
                        for (let key in dic) {
                            obj[dic[key]] = vData[key];
                        }
                        store.commit("changeRealtimeYC", obj);
                        addBoundInfoBox(entity.position._value, "infoBox6");
                        // 把返回的值赋给store，然后传递给infobox
                        // addBoundInfoBox(entity.position._value, "infoBox2");
                        // currentEntity = entity
                    });
            };
        };
        // 点击球上在建工地
        const GDclick = (entity) => {
            var cartographicPosition =
                Cesium.Ellipsoid.WGS84.cartesianToCartographic(
                    entity.position._value
                ); //笛卡尔转84
            var lat = Cesium.Math.toDegrees(cartographicPosition.latitude);
            var lng = Cesium.Math.toDegrees(cartographicPosition.longitude);
            let option = {
                destination: Cesium.Cartesian3.fromDegrees(
                    parseFloat(lng),
                    parseFloat(lat + 0.05),
                    80000
                ),
                duration: 1.5,
            };
            viewer.camera.flyTo(option);
            removeInfoBox();
            option.complete = () => {
                let qizhongjiCount = 0;
                let shengjiangjiCount = 0;
                if (entity.entityDetail.tequipments != null) {
                    console.log(entity.entityDetail.tequipments);
                    entity.entityDetail.tequipments.forEach((ele) => {
                        ele.equipment === "塔式起重机"
                            ? (qizhongjiCount = ele.count)
                            : (shengjiangjiCount = ele.count);
                    });
                    let obj = {
                        项目地址: entity.entityDetail.address,
                        施工单位: entity.entityDetail.unit,
                        塔式起重机: qizhongjiCount,
                        施工升降机: shengjiangjiCount,
                        unitId: entity.entityDetail.unitId,
                    };
                    store.commit("changeConstructGD", obj);
                    addBoundInfoBox(entity.position._value, "infoBox7");
                } else {
                    let obj = {
                        项目地址: entity.entityDetail.address,
                        施工单位: entity.entityDetail.unit,
                        塔式起重机: qizhongjiCount,
                        施工升降机: shengjiangjiCount,
                    };
                    store.commit("changeConstructGD", obj);
                    addBoundInfoBox(entity.position._value, "infoBox7");
                }
            };
        };
        //弹出弹框
        const addBoundInfoBox = (positionValue, elementId) => {
            const oneDiv = window.document.getElementById(elementId);
            oneDiv.style.display = "block";
            let preRenderListener = viewer.scene.preRender.addEventListener(
                function () {
                    let elWidth = oneDiv.offsetWidth;
                    let elHeight = oneDiv.offsetHeight; // + 60
                    const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    const canvasPosition =
                        viewer.scene.cartesianToCanvasCoordinates(
                            position,
                            scratch
                        ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标

                    if (Cesium.defined(canvasPosition)) {
                        // 根据元素宽高及当前点屏幕坐标进行偏移
                        oneDiv.style.top =
                            canvasPosition.y - elHeight * 1.1 + "px";
                        oneDiv.style.left =
                            canvasPosition.x - elWidth / 2 + "px";
                    }
                }
            );
        };
        //添加删除点位
        const addAndRemove = (item) => {
            if (item.state1) {
                let pointsDataUrl = `${sjzxUrl}${item.kbApiAll}`;
                if (userRegion.value == "海南省") {
                }else{
                    pointsDataUrl = `${sjzxUrl}${item.kbApiAll}?addvcd=${window.regionCode[userRegion.value]}`
                }
                //添加点
                axios.get(pointsDataUrl).then((res) => {
                    // console.log()
                    pointeManager.addPoints(
                        item.label,
                        res.data.data,
                        item.kbApiDetail,
                        "leftClick",
                        pointHandleClick
                    );
                });
            } else {
                //清除点
                pointeManager.removePointBySign(item.label);
            }
        };
        const newAddAndRemove = (item) => {
            if (item.state1) {
                //添加点
                axios.get(`${sjzxUrl}${item.kbApiAll}`).then((res) => {
                    console.log(res.data.data);
                    pointeManager.addNewPoints(
                        item.label,
                        res.data.data,
                        item,
                        "leftClick",
                        newPointHandleClick
                    );
                });
            } else {
                //清除点
                pointeManager.removePointBySign(item.label);
            }
        };
        //点击责任人按钮,3811
        const handlePeopleClick = (item, index) => {
            pointeManager.removeAll();
            //viewer.entities.removeAll();
            peopleList.value.forEach((item1, index1) => {
                if (index1 == 0) {
                    item1.state1 = !item1.state1;
                }
            });
            if (item.state1) {
                store.commit("changeFxfkRightShow", true);
                store.commit("changeFxffLegendShow", false);
                store.commit("changeFxfkRightContent", {
                    echarts: ["市县统计"],
                    item,
                    type: "三防责任人信息",
                });
                //添加三防责任人
                //item.kbApiAll)===/api/v2/sanFang/getSfzrrxxList
                axios.get(`${sjzxUrl}${item.kbApiAll}`).then((res) => {
                    let peoples = res.data.data;
                    pointeManager.addLabelPoints(
                        item.label,
                        peoples,
                        item.kbApiDetail,
                        "leftClick",
                        peopleHandleClick
                    );
                });
                //添加影像
                hnsxqh = viewer.imageryLayers.addImageryProvider(
                    new Cesium.WebMapServiceImageryProvider({
                        url: "http://172.25.110.35:8310/geoserverplus/gwc/service/wms",
                        layers: `icenter:HNxzqh-PNG-4326`,
                        parameters: {
                            service: "WMS",
                            format: "image/png",
                            style: "default",
                        }, //tileWidth: 256, //tileHeight: 256,
                        srs: "EPSG:4326",
                    })
                );
            } else {
                if (hnsxqh) {
                    viewer.imageryLayers.remove(hnsxqh);
                    hnsxqh = null;
                }
                pointeManager.removeLabels();
                //pointeManager.removeAll();
                //viewer.entities.removeAll();
                store.commit("changeFxfkRightShow", false);
            }
        };
        //生产安全
        const handleDangerClick = (e, item, index) => {
            pointeManager.removeAll();
            //viewer.entities.removeAll();
            produceList.value.forEach((item1, index1) => {
                if (index1 == index) {
                    item1.state1 = !item1.state1;
                }
            });
            if (item.state1) {
                addAndRemove(item);
                switch (item.label) {
                    case "非煤矿山安全生产":
                        store.commit("changeFxfkRightShow", true);
                        store.commit("changeFxfkRightContent", {
                            echarts: ["市县统计"],
                            item,
                            type: item.label,
                        });
                        console.log(store.state.fxfkRightContent);
                        break;
                    case "企业信息":
                        store.commit("changeFxfkRightShow", false);
                        // store.commit("changeFxfkRightContent", {
                        //     echarts: [],
                        //     item,
                        //     type: item.label,
                        // });
                        break;
                    case "重大危险源信息":
                        store.commit("changeFxfkRightContent", {
                            echarts: ["市县统计"],
                            item,
                            type: item.label,
                        });
                        store.commit("changeFxfkRightShow", true);
                        break;
                }
            } else {
                pointeManager.removeAll();
                store.commit("changeFxfkRightShow", false);
            }
        };
        //点击左边面板
        const handleItemClick = (e, item, index) => {
            let checkedCities = [];
            // 循环数组,实现选中和反选
            list.value.forEach((item1, index1) => {
                if (index1 == index) {
                    item1.state1 = !item1.state1;
                }
            });
            //选中后的最新的数组，更新给vuex
            list.value.forEach((item1, index1) => {
                if (item1.state1) {
                    checkedCities.push(item1.label);
                }
            });
            //先去重
            checkedCities = Array.from(new Set(checkedCities));
            //没有被选项的时候，显示默认页面
            if (checkedCities.length == 0) {
                // 全不选的时候
                store.commit("changeFxfkRightShow", false);
                store.commit("changeCheckedCities", checkedCities);
                pointeManager.removeAll();
            } else {
                if (
                    item.label !== "实时渔船" &&
                    item.label !== "在建工地"
                ) {
                    store.commit("changeFxffLegendShow", true);
                    store.commit("changeFxfkRightShow", true);
                } else {
                    //store.commit("changeFxffLegendShow", true);
                    store.commit("changeFxfkRightShow", false);
                }
                // 有被选中的时候，需要显示防汛防风面板，并设置最新的统计信息
                store.commit("changeCheckedCities", checkedCities);
                setTimeout(() => {
                    if (item.onlineList || item.constructVoList) {
                        YCandGD(item);
                    } else {
                        if (!!item.kbApiAll) addAndRemove(item);
                    }
                }, 50);
                switch (item.label) {
                    case "水库":
                        store.commit("changeFxfkRightContent", {
                            echarts: ["市县统计", "工程规模统计"],
                            item,
                            type: "水库",
                        });
                        break;
                    case "地质灾害隐患点":
                        store.commit("changeFxfkRightContent", {
                            echarts: [
                                "市县统计",
                                "灾害类型统计",
                                "灾害规模统计",
                            ],
                            item,
                            type: "地质灾害隐患点",
                        });

                        break;
                    case "漫水桥(路)":
                        store.commit("changeFxfkRightContent", {
                            echarts: ["漫水桥(路)市县统计"],
                            item,
                            type: "漫水桥(路)",
                        });

                        break;
                    case "危房":
                        store.commit("changeFxfkRightContent", {
                            echarts: ["危房市县统计"],
                            item,
                            type: "危房",
                        });

                        break;
                    case "旅游景区景点":
                        store.commit("changeFxfkRightContent", {
                            echarts: [
                                "旅游景区景点市县统计",
                                "日最大承载游客量统计",
                            ],
                            item,
                            type: "旅游景区景点",
                        });

                        break;
                    case "易淹易涝点(区)":
                        store.commit("changeFxfkRightContent", {
                            echarts: [
                                "市县统计",
                                "影响人数统计",
                                "影响户数统计",
                            ],
                            item,
                            type: "易淹易涝点(区)",
                        });

                        break;

                    case "渔船":
                        store.commit("changeFxfkRightContent", {
                            echarts: ["渔船市县统计", "渔船抗风等级统计"],
                            item,
                            type: "渔船",
                        });

                        break;

                    case "渔港":
                        store.commit("changeFxfkRightContent", {
                            echarts: [
                                "渔港市县统计",
                                "避风船只容量统计",
                                "抗风能力统计",
                            ],
                            item,
                            type: "渔港",
                        });

                        break;
                    case "塔吊":
                        store.commit("changeFxfkRightContent", {
                            echarts: ["塔吊市县统计"],
                            item,
                            type: "塔吊",
                        });

                        break;
                    case "其他":
                        store.commit("changeFxfkRightContent", {
                            echarts: ["其他市县统计"],
                            item,
                            type: "其他",
                        });

                        break;
                    case "实时渔船":
                        // 面板关闭
                        break;
                    case "在建工地":
                        // 面板关闭
                        break;
                    // case "三防责任人信息":
                    //     store.commit("changeFxfkRightContent", {
                    //         echarts: ["三防责任人信息市县统计"],
                    //         item,
                    //         type: "三防责任人信息",
                    //     });
                    //     break;
                }
            }
        };
        const handlePlaceChange = (val) => {
            console.log(val);
        };
        onMounted(() => {
            // 注册双击事件
            if (!handler3D) {
                handler3D = new Cesium.ScreenSpaceEventHandler(
                    viewer.scene.canvas
                );
                handler3D.setInputAction(
                    handlePeopleDoubleClick,
                    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
                );
            }
            //let url = "http://59.212.37.22/mapserver/label/WMTS/1.0/WELF_INST_P/460902";
            //let layer = "WELF_INST_P"
            let url =
                "http://59.212.37.22/mapserver/label/WELF_INST_P/getDatas?styleId=460902";
            //let layer = "WELF_INST_P"
            // let curLayer = new Cesium.UrlTemplateImageryProvider({
            //     url: `${url}?layer=${layer}&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format={format}&TileMatrix={TileMatrix}&TileRow={y}&TileCol={x}`,
            //     layer: layer ,
            //     style: "default",
            //     format: "image/png",
            //     tileMatrixSetID: "default028mm",
            //     tilingScheme: new Cesium.GeographicTilingScheme(),
            //     //动态计算level
            //     customTags:{
            //         TileMatrix:function(imageryProvider, x, y, level){
            //             return level+1;
            //         },
            //     },
            //     //图层拾取
            //     // pickFeaturesUrl: `http://59.212.37.22/ime-cloud/rest/WELF_INST_P/feature?where=classcode like '460901%'  and name='海南省救助管理站'`,
            //     // //图层拾取回调
            //     // getFeatureInfoFormats: [new Cesium.GetFeatureInfoFormat( "html","text/html", callback)]
            // })
        });
        onBeforeUnmount(() => {
            if (hnsxqh) {
                viewer.imageryLayers.remove(hnsxqh);
                hnsxqh = null;
            }
            pointeManager.removeAll();
            store.commit("changeFxfkRightShow", false);
            if (handler3D) {
                handler3D.removeInputAction(
                    Cesium.ScreenSpaceEventType.LEFT_CLICK
                );
                handler3D = null;
            }
            YCtimeid && clearInterval(YCtimeid);
            YCtimeid = null;
        });
        const { list, peopleList, produceList } = toRefs(themeList);
        return {
            handleItemClick,
            handlePeopleClick,
            handleDangerClick,
            handlePlaceChange,
            list,
            peopleList,
            produceList,
        };
    },
};
</script>
<style lang="stylus" >
.placeSelect {
    .el-input__inner {
        background: #26458c;
    }

    .el-input__inner, .el-textarea__inner {
        color: #fff;
    }

    .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
        background: #00e5fd;
    }

    .el-cascader-menu__list {
        height: 300px;
    }
}

.placeSelect {
    background: #26458c !important;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .fxfkLeftpanel {
        width: vw(400);
        height: vh(940);
        overflow-y: scroll;
        padding-top: vh(5);

        .placeSelect {
            position: fixed;
            left: vw(440);
            top: vh(110);
            border: 1px solid #ddd;
        }

        .title {
            text-align: center;
            font-size: vw(16);
        }

        .themePic {
            width: 100%;
            display: grid;
            grid-template-columns: vw(200) vw(180);
            grid-row-gap: vh(30);
            grid-column-gap: vw(10);
            margin-top: vh(15);
            margin-left: vh(0);
            margin-bottom: vh(30);

            .themePicItem {
                display: flex;
                justify-content: space-between;
                background: url('/images/sjzx/item.png') no-repeat;
                background-size: 100% 100%;
                line-height: vh(37);
                height: vh(37);
                font-size: vw(14);
                margin-right: vw(2);
                padding-right: vw(5);
                cursor: pointer;

                .dataName, .dataName1 {
                    display: flex;
                    align-items: center;

                    img {
                        margin-right: vw(5);
                        margin-left: vw(5);
                        width: vw1(40);
                        height: vh(20);
                    }
                }

                .num {
                    // width:vw(35)
                    text-align: right;
                }

                .dataName {
                    img {
                        margin-right: vw(5);
                        margin-left: vw(5);
                    }
                }

                .num1 {
                    width: vw(35);
                    text-align: center;
                }
            }

            .themePicItemActive {
                div {
                    color: #00F4FD;
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .fxfkLeftpanel {
        width: 100%;
        height: vh(460);
        margin-top: vh(10);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        // flex-direction:column;
        .title {
            text-align: center;
            font-size: vw1(32);
        }

        .box {
            width: 100%;

            .themePic {
                width: 100%;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                // grid-template-columns: vw1(180) vw1(180);
                grid-row-gap: vh(30);
                grid-column-gap: vw1(20);
                // margin-top: vh(30);
                margin-left: vh(0);
                margin-bottom: vh(20);
                background: url('/images/sjzx/panelBg.png') no-repeat;
                background-size: 100% 100%;
                padding: vh(30) vw1(20);

                .themePicItem {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;
                    height: vh(150);
                    font-size: vw1(24);
                    cursor: pointer;

                    .dataName, .dataName1 {
                        flex-shrink: 0;
                        width: 60%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                        height: vh(120);
                        line-height: vh(30);

                        img {
                            display: block;
                            width: vw1(50);
                            height: vh(50);
                        }

                        p {
                            flex: 1;
                            display: flex;
                            align-items: center;
                        }
                    }

                    .contentLine {
                        display: none;
                    }

                    .num {
                        width: vw1(70);
                        text-align: center;
                    }

                    .num1 {
                        width: vw1(70);
                        text-align: center;
                    }
                }

                .themePicItem2 .num1 {
                    opacity: 0;
                }

                .themePicItemActive {
                    div {
                        color: #00F4FD;

                        p {
                            color: #00F4FD;
                        }
                    }
                }
            }
        }

        .yingjiBox {
        }

        .half {
            .themePic {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .secondBox {
            width: 70%;

            .themePic {
                padding-right: 0;
                margin-right: vw1(-10);
            }
        }

        .thirdBox {
            width: 28%;

            .themePic {
                grid-template-columns: repeat(1, 1fr);
            }
        }
    }
}
</style>